<template>
  <div>
    <van-button @click="increment" type="primary" block>按钮</van-button>
    <div>{{ count }} {{ doubleCount }}</div>
    <div v-for="item in array" :key="item.id">{{ item.id }} - {{ item.title }}</div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, reactive, onMounted } from 'vue'
  import apis from '../apis'
  import { storeToRefs } from 'pinia'
  import { useCounterStore } from '@/stores/counter.js'
  export default defineComponent({
    setup() {
      const counterStore = useCounterStore()
      let { increment } = counterStore // action等方法是可以解析出来，但是state不行，要用storeToRefs
      const data = reactive({
        array: []
      })

      const methods = {
        increment,
        async getNode() {
          let res = await apis.test.topics()
          data.array = res.data
        }
      }
      onMounted(async () => {
        await methods.getNode()
      })
      return {
        ...toRefs(data),
        ...storeToRefs(counterStore),
        ...methods
      }
    }
  })
</script>

<style scoped lang="less"></style>
